<template>
	<view class="container">
		<userinfo id="user" :options="user_options" @getUserscope="getUserInfo" @toLogin="getUserInfo"></userinfo>
		<villageBindHouse :options="bind_options" @cancleBindHouse="cancleBindHouse"></villageBindHouse>
		<uni-fab :content="fab_content" :pattern="fab_pattern" @trigger="trigger"></uni-fab>
		<view class="container-box" v-for="(item,index) in listData" :key="index" @tap="goUrl" :data-aricle_id="item.aricle_id">
			<view class="msg-box">
				<view class="info-box">
					<view class="info-icon">
						<image :src="item.avatar" class="info-img"></image>
					</view>
					<view class="info-text">
						<view class="name">{{ item.nickname }}</view>
						<view class="text" v-if="item && item.type==2">{{ item.comment_content }}</view>
						<view class="text-zan" v-if="item && item.type==1">
							<image :src="item.comment_content" class="text-zanimg"></image>
						</view>
						<view class="time">{{ item.time_status }}</view>
					</view>
				</view>
				<view class="msg-icon" v-if="item && item.aricle_img && !item.aricle_title">
					<image :src="item.aricle_img" class="msg-img"></image>
				</view>
				<view class="msg-text" v-if="item && item.aricle_title && item.aricle_img">
					<image :src="item.aricle_img" class="msg-img"></image>
				</view>
				<view class="msg-text" v-if="item && item.aricle_title && !item.aricle_img">
					{{item.aricle_title | ellipsis}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var common = require('../../../utils/common.js');
	import uniFab from '../component/uni-fab/uni-fab.vue';
	var app = getApp();
	var _this;
	import villageBindHouse from '../../../appComponent/villagePage/villageBindHouse';
	export default {
		data() {
			return {
				userInfo: {},
				bind_options: {},
				user_options: {},
				listData: [],
				pigcms_id: 0,
				village_id: 0,
				aricle_id: '',
				fab_content: [],
				fab_pattern:{}
			}
		},
		components: {
			villageBindHouse,
			uniFab
		},
		onShow() {
			// #ifdef H5
				common.hideWxShare()
			// #endif
		},
		onLoad: function(options) {
			_this = this;
			common.setMainColor(_this, function(config) {
				_this.fab_pattern = {
					buttonColor: app.globalData.config.config.mobile_head_color
				}
				if (app.globalData.tabBar && app.globalData.tabBar.list) {
					_this.fab_content = app.globalData.tabBar.list;
				}
			});
			common.getTxtKey('我的提醒').then(key => {
				uni.setNavigationBarTitle({
					title: key
				});
			}, () => {});
			const res = uni.getStorageSync("village_key");
			_this.pigcms_id = res.pigcms_id;
			_this.village_id = res.village_id;
			common.post('HouseApi&a=message_new', {
				village_id: _this.village_id,
				pigcms_id: _this.pigcms_id
			}, data => {
				_this.listData = data.my_list;
			});
		},
		filters: {
			ellipsis(value) {
				if (!value) return ''
				if (value.length > 14) {
					return value.slice(0, 14) + '...'
				}
				return value
			}
		},
		methods: {
			goUrl(e) {
				console.log(e)
				var aricle_id = e.currentTarget.dataset.aricle_id
				uni.navigateTo({
					url: '/pages/village/resident/detailds?aricle_id=' + aricle_id
				})
			},
			trigger(param) {
				var url = param.item.pagePath;
				if (_this.village_id) {
					url = common.changeURLArg(url, 'village_id', _this.village_id);
				}
				if (_this.pigcms_id) {
					url = common.changeURLArg(url, 'pigcms_id', _this.pigcms_id);
				}
				console.log('tabbar url', url);
				common.parseUrl(url, '', false, param.item.text);
			}
		},
	}
</script>
<style>
	.container {
		padding: 0px 0px 0px 0px;
		margin: 0px;
		background: #F5F5F5;
		padding-top: 15rpx;
	}

	.container-box {
		background: #FFFFFF;
	}

	.msg-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 18rpx 18rpx 18rpx 0;
		border-bottom: 1rpx solid #ECECEC;
		margin-left: 18rpx;
	}

	.info-box {
		display: flex;
		flex-direction: row;
	}

	.info-icon {
		width: 85rpx;
		height: 85rpx;
	}

	.info-img {
		width: 100%;
		height: 100%;
	}

	.info-text {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 18rpx;
	}

	.name {
		font-size: 26rpx;
		font-weight: bold;
		color: rgba(95, 110, 149, 1);
		line-height: 44rpx;
	}

	.text {
		font-size: 26rpx;
		font-weight: 500;
		color: rgba(19, 19, 19, 1);
		line-height: 44rpx;
	}
	.text-zan {
		width: 30rpx;
		height: 30rpx;
	}
	.text-zanimg {
		width: 100%;
		height: 100%;
	}
	.time {
		font-size: 24rpx;
		font-weight: 500;
		color: rgba(91, 91, 91, 1);
		line-height: 44rpx;
	}

	.msg-icon {
		width: 110rpx;
		height: 110rpx;
	}
	.msg-text {
		font-size: 20rpx;
		width: 110rpx;
		height: 110rpx;
		word-wrap:break-word;
		word-break:break-all;
		overflow: hidden;
	}
	.msg-img {
		width: 100%;
		height: 100%;
	}
</style>
